<template>
	<view class="anxinqian_vcode">
		<view class="vcode_box">
			<view class="vcode_box_head">
				<view class="vcode_box_head_title">输入验证码</view>
				<view class="vcode_box_head_stitle">
					验证码已发送至：<text class="vcode_box_phone">{{ phone }}</text>
				</view>
			</view>
			<view class="vcode_box_input_part" style="margin-bottom: 20px;">
				<up-code-input mode='bottomLine' class="myCode" v-model="code" :space="5"></up-code-input>
				<div style="width: 80px;margin-left: 10px;">
					<up-code ref="uCode" @change="codeChange"></up-code>
					<up-button style="height: 35px;" type="primary" @tap="getCode"><span
							style="font-size: 10px;">{{ tips }}</span></up-button>
				</div>
			</view>
			<view>
				<up-button type="primary" color="rgb(0,129,255)" customStyle="borderRadius:5px"
					@click="confirm">验证</up-button>
			</view>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
	ref,
	nextTick
} from "vue"
import {
	onLoad
} from "@dcloudio/uni-app"
import {
	getUserProfile
} from "@/api/user"
import {
	getAnxinqianCode,
	confirmAnxinqianCode
} from "@/api/driver"



/* 数据 */
const uToastRef = ref<any>(null)
// 获取验证码按钮
const uCode = ref<any>(null)
const anxinqianId = ref('')
// 验证码
const code = ref('')
// 页面深度
const delta = ref(1)
// 电话号码
const phone = ref('')
const tips = ref('')


/* 函数 */
const codeChange = (text: string) => {
	tips.value = text
}
// 获取验证码
const getCode = async () => {
	if (uCode.value.canGetCode) {
		uToastRef.value.show({
			type: 'loading',
			message: "正在获取验证码",
			duration: -1
		})
		let codeRes = await getAnxinqianCode({
			anxinqianId: anxinqianId.value
		})
		uToastRef.value.hide()
		if (codeRes.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "验证码已发送"
			})
		}
		// 通知验证码组件内部开始倒计时
		uCode.value.start()
	} else {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "倒计时结束后再发送"
		})
	}
}
// 获取用户信息
const getUserInfo = async () => {
	uToastRef.value.show({
		message: '加载中',
		type: 'loading',
		duration: -1
	})
	let res = await getUserProfile()
	uToastRef.value.hide()
	if (res.success) {
		phone.value = res.data.phone.slice(0, 3) + '*'.repeat(4) + res.data.phone.slice(-4)
		if (!res.data.anxinqianId) {
			uToastRef.value.show({
				message: '你还未开通电子签账户',
				type: 'error',
				complete() {
					uni.navigateBack({
						delta: delta.value
					})
				}
			})
			return
		} else if (parseInt(res.data.anxinqianConfirm)) {
			uToastRef.value.show({
				message: '你已验证电子签',
				type: 'error',
				complete() {
					uni.navigateBack({
						delta: delta.value
					})
				}
			})
			return
		} else {
			anxinqianId.value = res.data.anxinqianId
			await getCode()
		}
	}
}
// 验证按钮
const confirm = async () => {
	if (!code.value || code.value.length !== 6) {
		uToastRef.value.show({
			message: '请填写验证码',
			type: 'warning'
		})
		return
	}
	uToastRef.value.show({
		message: '验证中',
		type: 'loading',
		duration: -1
	})
	let res = await confirmAnxinqianCode({
		verifyCode: code.value
	})
	uToastRef.value.hide()
	if (res.success) {
		uToastRef.value.show({
			message: '您已验证电子签！',
			type: 'error',
			complete() {
				uni.navigateBack({
					delta: delta.value
				})
			}
		})
	}
}
// 初始化封装
const init = async () => {
	await nextTick()
	await getUserInfo()
}

// 钩子
onLoad((options: any) => {
	if (options.delta) {
		delta.value = options.delta
	}
	init()
})
</script>

<style lang="scss" scoped>
.myCode ::v-deep .u-code-input__item {
	border-bottom: 1px solid #3c9cff;
}

.anxinqian_vcode {
	min-height: calc(100vh - 44px);
	background-color: #fff;

	.vcode_box {
		width: 85%;
		margin: 0 auto;

		.vcode_box_head {
			padding: 80px 0 40px;

			.vcode_box_head_title {
				font-size: 26px;
				font-weight: bold;
				padding-bottom: 10px;
			}

			.vcode_box_head_stitle {
				color: #777;

				.vcode_box_phone {
					color: rgb(64, 117, 247);
				}
			}
		}

		.vcode_box_input_part {
			display: flex;
			justify-content: center;
		}

		.reget_part {
			padding: 20px 0 30px 10px;
			color: #999;

			&.reget {
				color: rgb(64, 117, 247);
			}
		}
	}
}
</style>